<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>2. 编写页面 | 被删的前端游乐场</title>
    <meta name="description" content="Just playing around">
    
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.a683ed26.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.e5cf4092.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.c853767c.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.eed49fdd.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/30.cbf89c36.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a683ed26.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-0cd75e06><span class="stand" data-v-0cd75e06></span> <div class="cat" data-v-0cd75e06><div class="body" data-v-0cd75e06></div> <div class="head" data-v-0cd75e06><div class="ear" data-v-0cd75e06></div> <div class="ear" data-v-0cd75e06></div></div> <div class="face" data-v-0cd75e06><div class="nose" data-v-0cd75e06></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div></div> <div class="tail-container" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>前端入门</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-basic/front-end/front-end-1.html" class="sidebar-link">1. 什么是前端</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-2.html" class="active sidebar-link">2. 编写页面</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-2.html#页面查看" class="sidebar-link">页面查看</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-2.html#页面组成" class="sidebar-link">页面组成</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-2.html#单页应用" class="sidebar-link">单页应用</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-2.html#多页应用" class="sidebar-link">多页应用</a></li></ul></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-3.html" class="sidebar-link">3. HTML 和 CSS</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html" class="sidebar-link">4. DOM 和 BOM</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-5.html" class="sidebar-link">5. Javascript</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-6.html" class="sidebar-link">6. 认识浏览器</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html" class="sidebar-link">7. 代码调试</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-8.html" class="sidebar-link">8. Ajax 和 http</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-9.html" class="sidebar-link">9. 网络协议基础</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-10.html" class="sidebar-link">10. 理解 HTTP 协议</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>前端深入理解</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>本文简单说明一下一个网页的结构，以及 HTML 和 CSS 编写页面。</p> <h1 id="前端页面"><a href="#前端页面" aria-hidden="true" class="header-anchor">#</a> 前端页面</h1> <p>打开浏览器，里面全都是网页或是网站。包括大家常用的百度、论坛、视频网站等等，当然现在使用 App 的占比上升了不少。不过对于常常需要搜索、或是某些应用的老用户来说，当然是大屏幕的视野要宽，键盘的输入要快啦。</p> <h2 id="页面查看"><a href="#页面查看" aria-hidden="true" class="header-anchor">#</a> 页面查看</h2> <p>近年来，单页应用的出现率涨高了。要说明什么是单页应用呢，我们先从最初的静态页面说起。</p> <p>静态页面，里面主要是<code>HTML</code>、<code>CSS</code>和<code>javascript</code>这几种类型组成的。当然还有像<code>xHTML</code>/<code>svg</code>等待。</p> <p>废话少说，我们先来看看百度首页。</p> <h3 id="右键菜单"><a href="#右键菜单" aria-hidden="true" class="header-anchor">#</a> 右键菜单</h3> <p>在定位某个元素的时候，我们也可以在该元素上右键选择“检查”，菜单如下：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1510044313%281%29.png" alt="image"></p> <ul><li>查看网页源代码</li></ul> <p>选择“查看网页源代码”，能看到当前页面的整个<code>HTML</code>文档，里面包括一些当前页面的代码。</p> <ul><li>另存为</li></ul> <p>选择“另存为”，可以将该页面以及相关的一些静态资源打包下载，以前经常这样来“借鉴”别人的样式。</p> <ul><li>检查</li></ul> <p>选择“检查”，可以检查当前选中的元素，同时打开控制台。接下里我们重点介绍控制台，因为你们以后会与他们为伴。</p> <h3 id="控制台"><a href="#控制台" aria-hidden="true" class="header-anchor">#</a> 控制台</h3> <p>这里顺便讲讲，前端常用的调试工具。首先，必备第一个就是 Chrome 浏览器啦。</p> <h4 id="打开控制台"><a href="#打开控制台" aria-hidden="true" class="header-anchor">#</a> 打开控制台</h4> <p>假设你们已经在使用 Chrome 浏览器看我的文章了，那么我们可以有三个方法打开控制台：</p> <ol><li>按键<code>F12</code>。</li> <li>右键菜单，选择“检查”。</li> <li>快捷键<code>Shift + Ctrl + I</code>。</li></ol> <h4 id="控制台菜单"><a href="#控制台菜单" aria-hidden="true" class="header-anchor">#</a> 控制台菜单</h4> <p>我们来看控制台：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1510045324%281%29.png" alt="image"></p> <p>这是控制台的菜单，这边简单做介绍（从左往右）：</p> <ol><li>检查元素（箭头带个框框）：与右键选择元素检查相似，后面讲。</li> <li>屏幕切换（手机卡在框框上）：该功能主要用于 PC 端和移动端屏幕切换，适合 H5 的开发，并且可匹配多种机型。</li> <li>Element：查看元素，能看到页面中所有存在的元素。</li> <li>Console：输出，常用来输出一些信息，或是错误信息。</li> <li>Source：查看源文件，可支持打断点调试。开启了 source map 后，更是可以浏览器直接更改本地文件。</li> <li>Network：查看网络请求信息，包括静态资源的下载、ajax 请求等。</li></ol> <p>这里面主要介绍这几个，其他的等需要的时候你们就会自己去接触啦。</p> <h4 id="element-查看元素"><a href="#element-查看元素" aria-hidden="true" class="header-anchor">#</a> Element 查看元素</h4> <p>我们看看元素的查看，这里很方便的是，当我们选中 Element 里面某个元素，Chrome 便会突显出来，并且伴有常用的元素信息，宽高、padding、margin 等等。</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/%7B521323E8-144E-4B2D-8567-9488ACB1EB4C%7D.png" alt="image"></p> <p>同时，我们也可以看到下方的 Style，里面会有当前元素匹配中的一些 CSS 样式，我们也可以尝试在这里调整，调整成想要的样式之后，再贴进我们的代码里。</p> <h4 id="console-输出"><a href="#console-输出" aria-hidden="true" class="header-anchor">#</a> Console 输出</h4> <p>我们常用几种方式来调试，包括打断点、<code>alert()</code>和<code>console</code>等。本骚年用<code>console</code>稍微多一些。</p> <p>看看百度的页面，还藏了招聘信息：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1510045732%281%29.png" alt="image"></p> <p>当然现在好像越来越流行了，有时候有趣得网站也会藏些解码游戏在里面。</p> <h4 id="network"><a href="#network" aria-hidden="true" class="header-anchor">#</a> Network</h4> <p>我们在搜索框里面输入内容，便能看到百度页面发起的请求：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1510046804%281%29.png" alt="image"></p> <p>我们能在这里查看请求的内容、状态、服务端返回的内容等等。</p> <h2 id="页面组成"><a href="#页面组成" aria-hidden="true" class="header-anchor">#</a> 页面组成</h2> <p>上面也提到过，我们的页面主要由<code>HTML</code>、<code>CSS</code>和<code>js</code>组成，如果只用于静态数据的展示，或许只需要前两者就好了，一些公司的主页/官网也常常是简单的页面。</p> <h3 id="html"><a href="#html" aria-hidden="true" class="header-anchor">#</a> HTML</h3> <p>HTML，指超文本标签语言。
它被称为通向 WEB 技术世界的钥匙，因为我们的<code>CSS</code>和<code>Javascript</code>，其实也属于<code>HTML</code>中的<code>&lt;style&gt;</code>和<code>&lt;script&gt;</code>标签而已。</p> <p>但更多时候，我喜欢用<code>HTML</code>指代元素，例如<code>&lt;div&gt;</code>、<code>&lt;p&gt;</code>等。</p> <p>最简单的莫过于：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>我的第一个标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>我的第一个段落。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>我们的<code>&lt;html&gt;</code>里面包括两个子模快：</p> <ul><li><code>&lt;head&gt;</code>：常包括一些样式、<code>&lt;meta&gt;</code>标签、甚至是<code>&lt;script&gt;</code>，不展示到页面</li> <li><code>&lt;body&gt;</code>：包括展示在页面的内容</li></ul> <h3 id="css"><a href="#css" aria-hidden="true" class="header-anchor">#</a> CSS</h3> <p>CSS 主要是给我们的<code>HTML</code>元素添加样式，可以通过几个方式匹配：</p> <ul><li><code>DOM</code>：像常用的<code>p</code>、<code>ul/li</code>等便是<code>DOM</code>匹配</li> <li><code>class</code>：类的匹配</li> <li><code>id</code>：id 标识符的匹配</li></ul> <p><code>class</code>针对一类元素的匹配，<code>id</code>则是唯一标识符，若页面内有多个相同的<code>id</code>，则只有第一个生效。
给元素添加样式，像是绘画的过程，绘制边框、大小、颜色等，都是通过样式来设置的。</p> <h3 id="javascript"><a href="#javascript" aria-hidden="true" class="header-anchor">#</a> Javascript</h3> <p>JavaScript 是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。</p> <p>我们常常使用 Javascript 来做以下事情：</p> <ol><li>输出 HTML。</li> <li>处理事件（点击、输入等）。</li> <li>改变 HTML 内容和样式。</li> <li>处理 Http 请求。</li></ol> <p>其他的一些基础内容，这里面不详述了。推荐几个学习基础的网站：</p> <ul><li><a href="http://www.w3school.com.cn/index.html" target="_blank" rel="noopener noreferrer">w3school<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank" rel="noopener noreferrer">MDN web<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h1 id="单页-多页"><a href="#单页-多页" aria-hidden="true" class="header-anchor">#</a> 单页&amp;&amp;多页</h1> <p>前端程序员越来越频繁提到“单页应用”、“多页应用”这些，那这又分别代表什么呢？</p> <h2 id="单页应用"><a href="#单页应用" aria-hidden="true" class="header-anchor">#</a> 单页应用</h2> <p>其实很简单，单页应用与多页最简单的区别就是，单页应用，是一个<code>HTML</code>文件。</p> <p>当我们需要更改页面的展示，我们会移除掉部分元素，然后将需要新增的内容填充进去，与画画的擦除重绘相似。</p> <p>单页应用的好处是：</p> <ol><li>页面的数据状态都能维持着。</li> <li>部分擦除重绘，比整个页面刷新的效果体验要好很多。</li></ol> <p>当然，单页应用也会有缺点：</p> <ol><li>不利于 SEO。</li> <li>请求等待时间长。</li></ol> <p>事物都是有利有弊，单页应用的最大痛处在于 SEO。
<a href="https://zh.wikipedia.org/wiki/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96" target="_blank" rel="noopener noreferrer">搜索引擎优化<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>（英语：search engine optimization，缩写为 SEO），是一种通过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。</p> <p>而关于单页应用的 SEO，也是有各种各样的方式优化的，大家也可以去了解。</p> <h2 id="多页应用"><a href="#多页应用" aria-hidden="true" class="header-anchor">#</a> 多页应用</h2> <p>多页应用，更常见于相同的业务不同的页面的开发，这些页面或许没有很多的联系或者公用的数据，每个页面维护各自的状态。</p> <p>如今 H5 的业务多了，直出渲染也多了些。而多页应用和直出也是不错的搭配。</p> <h3 id="单页与多页应用的比较"><a href="#单页与多页应用的比较" aria-hidden="true" class="header-anchor">#</a> 单页与多页应用的比较</h3> <table><thead><tr><th>-</th> <th>单页面应用</th> <th>多页面应用</th></tr></thead> <tbody><tr><td>组成</td> <td>一个外壳页面和多个页面片段组成</td> <td>多个完整页面构成</td></tr> <tr><td>资源共用(css,js)</td> <td>共用，只需在外壳部分加载</td> <td>不共用，每个页面都需要加载</td></tr> <tr><td>刷新方式</td> <td>页面局部刷新或更改</td> <td>整页刷新</td></tr> <tr><td>url 模式</td> <td>a.com/#/pageone<br>a.com/#/pagetwo</td> <td>a.com/pageone.html<br>a.com/pagetwo.html</td></tr> <tr><td>用户体验</td> <td>页面片段间的切换快，用户体验良好</td> <td>页面切换加载缓慢，流畅度不够，用户体验比较差</td></tr> <tr><td>页面跳转动画</td> <td>容易实现</td> <td>无法实现</td></tr> <tr><td>数据传递</td> <td>容易</td> <td>依赖 url 传参、或者 cookie 、localStorage 等</td></tr> <tr><td>搜索引擎优化(SEO)</td> <td>需要单独方案、实现较为困难、不利于 SEO 检索 可利用服务器端渲染(SSR)优化</td> <td>实现方法简易</td></tr></tbody></table> <blockquote><p>以上表格内容来自<a href="https://juejin.im/post/5a0ea4ec6fb9a0450407725c" target="_blank" rel="noopener noreferrer">《前端：你要懂的单页面应用和多页面应用》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></blockquote> <h3 id="直出和同构"><a href="#直出和同构" aria-hidden="true" class="header-anchor">#</a> 直出和同构</h3> <p>直出，常常指代后端渲染，即我们请求的页面已经是把模版和数据组合好，直接吐出来给到浏览器。</p> <p>与此相对的，是前端渲染。例如单页应用，我们拿到的只是一个简单的空<code>&lt;html&gt;</code>，然后浏览器解析发现需要一些请求的数据和资源，发起二次请求。
当然，这样一来一去，消耗和等待的时间便会长了。</p> <p>同构又是什么呢？</p> <p>直出渲染的后端可以有很多，像 PHP、JSP、Node.js 等都是可以的。而同构的意思是，前后端使用一套代码。所以简单来说，就是 Node.js 的胜出了，同构最明显的优势，则是方便维护。</p> <h1 id="结束语"><a href="#结束语" aria-hidden="true" class="header-anchor">#</a> 结束语</h1> <p>本节简单介绍了关于前端页面的调试和组成，以及单页和多页应用的概念。对于<code>HTML</code>、<code>CSS</code>和<code>Javascript</code>，后面我们再详细说明一下吧。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-basic/front-end/front-end-2.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-basic/front-end/front-end-1.html" class="prev">
          1. 什么是前端
        </a></span> <span class="next"><a href="/front-end-playground/front-end-basic/front-end/front-end-3.html">
          3. HTML 和 CSS
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-3759" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty1.svg);"></div></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.e5cf4092.js" defer></script><script src="/front-end-playground/assets/js/3.c853767c.js" defer></script><script src="/front-end-playground/assets/js/2.eed49fdd.js" defer></script><script src="/front-end-playground/assets/js/30.cbf89c36.js" defer></script>
  </body>
</html>
